<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>TestPictures</title>
        <style>
            body {
                margin: 0;
                font-family: "Segoe UI Web (West European)", "Segoe UI",
                    -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
                    sans-serif;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            img {
                min-width: 60px;
                max-width: 100px;
            }
            #tool {
                position: fixed;
                top: 10px;
                left: 10px;
            }
            .show {
                height: 30px;
            }
            img {
                margin: 5px;
            }
            input {
                border: 1px solid #aaa;
                padding: 10px;
                outline: none;
                font-size: 16px;
                min-width: 200px;
                opacity: 0.5;
            }
            input:focus {
                border: 1px solid rgb(231, 89, 6);
                opacity: 1;
            }
            .mark {
                opacity: 0.7;
                background-color: white;
                margin: 6px;
                padding: 8px;
                font-size: 16px;
                user-select: text;
            }
            #pics {
                margin: 60px;
                padding: 30px;
                background: linear-gradient(#fafafa 50%, #efefef 50%);
                background-size: 100% 4px;
                font-size: 16px;
            }
            .time {
                color: #aaa;
                margin: 0 16px;
                font-size: 13px;
            }
        </style>
    </head>
    <body>
        <div id="tool">
            <input
                oninput="getKeyImage(this.value)"
                id="input"
                placeholder="输入开始搜索"
            />
            <span id="show1" class="show"></span>
        </div>
        <script>
            /* eslint-disable no-console */
            let mark
            function copy(text, options) {
                var debug,
                    message,
                    reselectPrevious,
                    range,
                    selection,
                    success = false
                if (!options) {
                    options = {}
                }
                if (mark) {
                    mark.remove()
                }
                debug = options.debug || false
                try {
                    document.body.style.userSelect = "none"
                    range = document.createRange()
                    selection = document.getSelection()

                    mark = document.createElement("span")
                    mark.classList.add("mark")
                    mark.textContent = text

                    document.getElementById("tool").appendChild(mark)

                    range.selectNode(mark)
                    selection.addRange(range)

                    var successful = document.execCommand("copy")
                    if (!successful) {
                        throw new Error("copy command was unsuccessful")
                    }
                    success = true
                } catch (err) {
                    console.error("unable to copy using execCommand: ", err)
                    console.warn("trying IE specific stuff")
                    try {
                        window.clipboardData.setData("text", text)
                        success = true
                    } catch (err) {
                        console.error(
                            "unable to copy using clipboardData: ",
                            err
                        )
                        console.error("falling back to prompt")
                        message = format(
                            "message" in options
                                ? options.message
                                : defaultMessage
                        )
                        window.prompt(message, text)
                    }
                } finally {
                    if (selection) {
                        selection.removeAllRanges()
                    }
                    document.body.style.userSelect = ""
                }

                return success
            }
        </script>
        <script>
            window.addEventListener("keydown", (ev) => {
                const input = document.getElementById("input")
                if (input !== document.activeElement) {
                    input.value = ""
                    getKeyImage("")
                }
                !(ev.metaKey || ev.ctrlKey) && input.focus()
            })
        </script>
        <script>
            function getKeyImage(key = "") {
                key = key.trim()
                if (key === "") {
                    input.value = ""
                }
                console.log(key)
                const imagesEle = document.getElementsByTagName("img")
                const images = []
                for (let x = 0; x < imagesEle.length; x += 1) {
                    images.push(imagesEle[x])
                }
                images.forEach((one) => {
                    if (!one.src.split("/").pop().includes(key)) {
                        one.style.display = "none"
                    } else {
                        one.style.display = "inline"
                    }
                })
            }
        </script>
        <script>
            function showSrc(img) {
                const picName = img.src.split("/").pop()
                copy(picName.split(".")[0])
            }
        </script>
        <div id="pics">IMAGES</div>
    </body>
</html>
